<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
        <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet-src.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.13/leaflet.draw.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.13/leaflet.draw-src.js"></script>
        <script src="../src/L.Deflate.js"></script>
        <style>
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }
        </style>
    </head>

    <div id="map"></div>

    <script>

    window.onload = function () {
        var map = L.map("map").setView([51.550406, -0.140765], 16);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        var features = L.deflate({minSize: 20});
        features.addTo(map);

        L.polygon([
            [51.551088, -0.144624],
            [51.550818, -0.143648],
            [51.550701, -0.143718],
            [51.550351, -0.142398],
            [51.550861, -0.142060],
            [51.551155, -0.143160],
            [51.551091, -0.143213],
            [51.551408, -0.144410]
        ])
        .bindPopup('UPS')
        .addTo(features);

        L.polygon([
            [51.550509, -0.140574],
            [51.550221, -0.140622],
            [51.550208, -0.140456],
            [51.550154, -0.140156],
            [51.550316, -0.140113],
        ])
        .bindPopup('Kentish Town Station')
        .addTo(features);

        var drawControl = new L.Control.Draw({
            edit: {
                featureGroup: features._featureGroup
            }
        });
        map.addControl(drawControl);

        map.on(L.Draw.Event.CREATED, function(event) {
            event.layer.addTo(features);
        });

        map.on(L.Draw.Event.DELETED, function(event) {
            const deletedLayers = event.layers;
            
            deletedLayers.eachLayer(function(l) {
                features.removeLayer(l);
            });
        });

        map.on(L.Draw.Event.EDITED, function(event) {
            const editedLayers = event.layers;
            editedLayers.eachLayer(function(l) {
                l.marker = features._makeMarker(l);
            });
        });
    }
    </script>

</html>
